<template>
    <div id="my-experiences">
        <!-- 工作经历 -->
        <div class="experiences-content">
            <div class="top-bg">
                <van-nav-bar class="header" fixed :border="false" @click-left="diffBack" @click-right="confirmEdit">
                        <div class="left"
                            slot="left">
                            <van-icon name="arrow-left"
                                    size="24px"
                                    color="#fff" />
                        </div>
                        <div class="title"
                            slot="title">{{title}}</div>
                        <div class="right" slot="right">完成</div>
                    </van-nav-bar>
            </div>
            <div class="reset-wrapper">
                <div class="reset-content">
                    <van-cell title="公司名称" size="large" is-link :value="name?name:'输入公司名称'" :value-class="name?'value-activeT':''" @click="goEdit('fromName',name)" style="margin-bottom: 0.24rem; border-radius: 0.1rem;"/>
                    <van-cell title="开始日期" size="large" is-link :value="startTime?startTime:'选择开始日期'" :value-class="startTime?'value-activeT':''" @click="goEdit('fromStartTime',startTime)" style="margin-bottom: 0.24rem; border-radius: 0.1rem;"/>
                    <van-cell title="结束日期" size="large" is-link :value="endTime?endTime:'选择结束日期'" :value-class="endTime?'value-activeT':''" @click="goEdit('fromEndTime',endTime)" style="margin-bottom: 0.24rem; border-radius: 0.1rem;"/>
                </div>
                <!-- <div class="btn" @click="delectBtn">
                    <div>保存</div>
                </div> -->
            </div>
      </div>
    </div>
</template>
<script>
import Vue from 'vue'
import { Dialog } from 'vant';
Vue.use(Dialog);
import { mapMutations, mapState } from "vuex";
import { noEmoji } from "@/utils/noEmoji";
import {getuserUid} from '@/utils/auth.js'
export default {
  components: {
  },
  data() {
    return {
      title: '工作经验',
      name: "",
      startTime: "",
      endTime: "",
      emoji: false,
      newExperienceT: {
          companyName: "",
          beginDate: "",
          endDate: "",
          number: ""
      }
    }
  },
  computed: {
      ...mapState({
          newExperience: state => state.newExperience,
          allResume: state => state.allResume
      })
  },
  created() {
      this.newExperienceT.number = this.allResume.workHistorys.length+1
      if (this.newExperience == null) {
          this.name = ""
          this.startTime = ""
          this.endDate = ""
          this.setNewExperience(this.newExperienceT)
      } else {
          this.name  = this.newExperience.companyName?this.newExperience.companyName:"",
          this.startTime = this.newExperience.beginDate?this.newExperience.beginDate:"",
          this.endTime = this.newExperience.endDate?this.newExperience.endDate:""
      }
  },
  methods: {
      goEdit(val,content) {
          // 跳转编辑经验细节
          this.$router.push({name: 'performance-editExperiences', params:{fromW: "fromN", info:val,tages:content}})
      },
      confirmEdit() {
          if (this.name == "") {
              this.$toast('公司名称无法为空')
          } else if (this.name != "") {
              if (this.startTime =="") {
                  this.$toast('开始日期无法为空')
              } else {
                 if (this.endTime == "") {
                     this.$toast('结束日期无法为空')
                 } else {
                     this.compareDate(this.startTime,this.endTime)
                 }
              }

          }
      },
      compareDate(start,end){
          var oDate1 = new Date(start);
          var oDate2 = new Date(end);
          if(oDate1.getTime() >= oDate2.getTime()){
              this.$toast('开始日期无法大于结束日期')
          } else {
              // 三要素添加
              this.addResume()
          }
      },
    // 添加简历 - 删除
    deleteHistory() {
      this.setNewExperience()
      this.$toast('清除成功')
      this.$router.push("/performance/myIntroduction");
    },
    // 添加简历
    async addResume() {
        if(this.allResume.workHistorys.length == 0) {
            const numberL = this.allResume.workHistorys.length +1
            this.newExperience.number = numberL
        } else if (this.allResume.workHistorys.length>0) {
            const numberE = this.allResume.workHistorys.length +2
            this.newExperience.number = numberE
        }
        this.setNewExperience(this.newExperience)
      const SPC = await HTTP("addResume", {
          userUid: getuserUid(),
          createBy: getuserUid(),
          workYears: "",
          resumeStylesInfos: null,
          resumeTypesInfos: null,
          resumeAreaInfos: null,
          workHistory: this.newExperience,
          resumeSkillInfos: null
      });
      if (SPC.code == 200) {
       this.$router.push("/performance/myIntroduction");
       this.$toast('添加成功')
      } else {
        this.$toast(SPC.msg || "服务器异常");
      }
    },
    diffBack() {
        if (this.name !="" &&this.startTime !="" && this.endTime !="" ) {
            // 默认填写完毕 但是忘记点击完成
            this.confirmEdit()
        } else  {
            Dialog.confirm({
                title: '添加简历',
                message: '您还没有完成简历填写哦，您确定放弃继续填写吗？'
            }).then(() => {
                this.deleteHistory()
            }).catch(() => {
                this.$toast('离成功又近一步了呢')
            });
        }
    },
    ...mapMutations(['setNewExperience'])
  }
};
</script>
<style>
</style>

<style lang="scss" scoped>
#my-experiences {
    position: absolute;
    width: 100%;
    height: 100%;
    .experiences-content{
        position: relative;
        width: 100%;
        height: 100%;
        .top-bg{
            width: 100%;
            background: #fff;
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            .header {
                background: #5E8EFE;
                color: #ffffff;
                height: 0.92rem;
                .title {
                    color: #ffffff;
                    font-size: 0.35rem;
                    }
                .right{
                    font-size: 0.32rem;
                    height: 0.92rem;
                    line-height: 1rem;
                }
            }
        }
        .reset-wrapper{
            position: fixed;
            width: 100%;
            top: 0.92rem;
            left: 0;
            right: 0;
            overflow-y: scroll;
            bottom: 0rem;
            .reset-content{
                width: 100%;
                padding: 0.24rem;
                box-sizing: border-box;
                border-radius: 0.1rem;
                .value-active{
                    width: 180%;
                    color: #5E8EFE;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                .value-activeT{
                    color: #282828;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                }
                .no-jobs{
                    width: 100%;
                    background: #FFFFFF;
                    border-radius: 0.1rem;
                    text-align: center;
                    color: #5E8EFE;
                    height: 0.9rem;
                    line-height: 0.9rem;
                    font-size: 0.32rem;
                    font-family: PingFangSC-Semibold;
                    margin-bottom: 0.7rem;
                }
            }
            .btn{
                box-sizing: border-box;
                width: 100%;
                height: 0.88rem;
                padding: 0 0.24rem;
                div{
                    width: 100%;
                    height: 0.88rem;
                    margin-bottom: 0.7rem;
                    line-height: 0.88rem;
                    color: #fff;
                    background: #5E8EFE;
                    font-size: 0.26rem;
                    font-family: PingFangSC-Semibold;
                    font-weight: 600;
                    border-radius: 0.1rem;
                    text-align: center;
                }
            }
        }
    }
    .alert-case{
        height: 2rem;
        line-height: 2rem;
        text-align: center;
    }
}
</style>
